<template>
    <div class="Login">
        <h2 style="padding-top: 60px;padding-left: 30px;font-size: 28px;">智慧医院便民平台</h2>
        <p style="padding-top: 10px;padding-left: 30px;">开启智慧医疗新时代</p>
        <div class="box">
            <div class="tab">
                <button @click="navigate('yan')"
                    :style="{ color: activeButton === 'yan' ? 'blue' : 'black' }">验证码登录</button>
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <button @click="navigate('phone')"
                    :style="{ color: activeButton === 'phone' ? 'blue' : 'black' }">密码登录</button>
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <button @click="navigate('face')"
                    :style="{ color: activeButton === 'face' ? 'blue' : 'black' }">人脸登录</button>
            </div>
            <van-cell-group inset>
                <van-field v-model="phone" type="text" placeholder="请输入您的手机号码" />
                <van-field v-model="val" type="text" placeholder="请输入手机验证码">
                    <template #button>
                        <van-button size="small" type="primary" @click="yzm" :disabled="numflag"
                            style="background:none;color:rgb(76, 138, 251);border: none;">
                            {{ numflag ? countdown : '获取验证码' }}
                        </van-button>
                    </template>
                </van-field>
                <p style="padding-left: 15px;padding-top: 10px;color:grey">验证码登录可一键注册或登录</p>
                <van-button type="primary" block @click="login"
                    style="margin-top: 40px;border-radius: 30px;width:92%;margin-left:10px;">登录</van-button>
            </van-cell-group>
            <p style="text-align: center;padding-top: 60px;">
                <van-icon name="wechat" size="1rem" />微信一键登录注册
            </p>
            <p style="padding-top: 80px;padding-left: 30px;display: flex; align-items: center;">
                <span><van-checkbox v-model="checked" icon-size="15px" is-link @click="showPopup"></van-checkbox></span>
                <span>我已阅读并同意</span>
                <span class="xie">隐私政策</span>
                <span class="xie">用户协议</span>
                <span>和</span>
                <span class="xie">平台协议</span>
            </p>
            <van-popup v-model:show="show"
                :style="{ padding: '64px', color: 'grey', paddingTop: '20px', fontSize: '17px' }">
                <h2 :style="{ color: 'black', paddingLeft: '60px' }">隐私声明</h2>
                <span>您需要同意</span>
                <span :style="{ color: 'black', fontWeight: '700' }">《隐私权政策》</span>
                <span>并完成注册后方可继续操作，请您充分阅读并接受全部内容后点击同意。</span><br />
                <span>
                    &nbsp;&nbsp;请您仔细阅读《隐私权政策》。我们依据国家最新法规要求，更新了《隐私权政策》，特此向您说明如下:
                </span><br />
                1、为向您提供交易、服务、社区等相关功能或服务,我们会收集、使用您的必要信息;<br />
                2、摄像头、麦克风、相册、GPS等敏感权限均不会默认开启,只有经过您明示授权的前提下才会为实现某项功能或服务时使用<br />
                <p>
                    <button @click="disagree"
                        :style="{ border: 'none', background: 'none', paddingLeft: '90px', color: disagreeClicked ? 'red' : 'black' }">不同意</button>
                    <button @click="agree"
                        :style="{ border: 'none', background: 'none', paddingLeft: '30px', color: agreeClicked ? 'red' : 'black' }">同意</button>
                </p>
            </van-popup>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watchEffect } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter()
import { Toast } from 'antd-mobile'
const checked = ref(false);
const disagreeClicked = ref(false);
const agreeClicked = ref(false);
// 按钮切换转换样式
const activeButton = ref('yan');
const navigate = (button) => {
    activeButton.value = button;
    if (button === 'yan') {
        router.push('/login')
    } else if (button === 'phone') {
        router.push('/phone')
    } else if (button === 'face') {
        router.push('/face')
    }
};
const setup = () => {
    return {
        activeButton,
        navigate,
    }
}
setup()
// 阅读协议
const show = ref(false);
const showPopup = () => {
    show.value = true;//显示弹窗
    agreeClicked.value = false;//重置按钮状态
    disagreeClicked.value = false;//重置按钮状态
};
const agree = () => {
    checked.value = true;//用户同意协议
    agreeClicked.value = true;//同意按钮被点击
    disagreeClicked.value = false;//重置按钮状态
    show.value = false;//隐藏弹窗
}
const disagree = () => {
    checked.value = false;//用户不同意协议
    disagreeClicked.value = true;//同意按钮被点击
    agreeClicked.value = false;//重置按钮状态
    show.value = false;//隐藏弹窗
}

// 手机号登录
const val = ref('');
const phone = ref('');
const code = ref('');
// 点击获取验证码倒计时
const numflag = ref(false); // 倒计时flag
const countdown = ref(60); // 倒计时渲染
const startCountdown = () => {
    numflag.value = true;
    const intervalId = setInterval(() => {
        countdown.value -= 1;
        localStorage.setItem('countdown', countdown.value)
        if (countdown.value === 0) {
            clearInterval(intervalId);
            countdown.value = 60;
            numflag.value = false;
            localStorage.removeItem('numflag')
            localStorage.removeItem('countdown')
        }
    }, 1000);
};
watchEffect(() => {
    if (countdown.value === 60) {
        numflag.value = false;
    }
});
const initCountdown = () => {
    const savedCountdown = localStorage.getItem('countdown');
    const savedNumFlag = localStorage.getItem('numflag') === 'true';
    if (savedCountdown && savedNumFlag) {
        countdown.value = parseInt(savedCountdown, 10);
        numflag.value = true;
        // 判断倒计时是否结束，未结束则提示用户等待
        if (countdown.value !== 60) {
            startCountdown();
            Toast.show({
                content: '请等待倒计时结束'
            });
        }
    }
};
onMounted(initCountdown)
const yzm = async () => {
    let reg = /^1[3456789]\d{9}$/;
    if (phone.value === "") {
        Toast.show({
            content: "请输入手机号"
        });
        return;
    }
    if (!reg.test(phone.value)) {
        Toast.show({
            content: '手机号格式不正确'
        });
        return;
    }
    if (numflag.value) {
        Toast.show({
            content: '请等待倒计时结束'
        });
        return;
    }
    let { data: { data } } = await axios.post('http://127.0.0.1:3000/SMS',
        { phone: phone.value });
    console.log(data);
    code.value = data;
    startCountdown();
    localStorage.setItem('numflag', 'true');
};
const login = async () => {
    // 校验协议是否勾选
    if (!checked.value) {
        Toast.show({
            content: '请阅读并同意协议',
            icon: 'fail',
        });
        return; // 结束函数，阻止继续执行
    }
    if (val.value === "") {
        Toast.show({
            content: "请输入验证码"
        });
        return;
    }
    if (val.value !== code.value) {
        Toast.show({
            content: "验证码不正确"
        });
        return;
    }
    let { data } = await axios.post("http://127.0.0.1:3000/code_login",
        {
            phone: phone.value,
            code: code.value
        });
    if (data.code === 200) {
        sessionStorage.setItem('token', data.token);
        sessionStorage.setItem('user', JSON.stringify(data.result[0]));
        sessionStorage.setItem('user_id', JSON.stringify(data.result._id));
        console.log(data.result._id)
        
        console.log(data.result);
        localStorage.setItem('token', data.token);
        sessionStorage.setItem('user', JSON.stringify(data.result));

        router.push('/home')
    } else {
        Toast.show({
            content: '登录失败'
        });
    }
};
</script>

<style lang="scss" scoped>
.box {
    margin-top: 40px;
}

.tab {
    margin-left: 30px;
    margin-bottom: 40px;

    button {
        border: 0;
        background: none;
        color: black;
    }

    button .active {
        color: rgb(76, 138, 251);
    }
}

.xie {
    color: rgb(76, 138, 251);
    padding-left: 5px;
    padding-right: 5px;
}
</style>